<template>
    <div class="app">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>商品列表</span>
            </div>
            <div class="text item">
                <div class="order_box">
                    <el-table :data="tableData" style="width: 80%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="商品 ID">
                                        <span>{{ props.row.id }}</span>
                                    </el-form-item>
                                    <el-form-item label="所属分类">
                                        <span>{{ props.row.category }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品图片">
                                        <el-image style="width: 100px; height: 100px" :src="props.row.imgUrl" :preview-src-list="[props.row.imgUrl]"></el-image>
                                    </el-form-item>
                                    <el-form-item label="商品描述">
                                        <span>{{ props.row.goodsDesc }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品名称">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品价格">
                                        <span>{{ props.row.price }}</span>
                                    </el-form-item>
                                    <el-form-item label="创建时间">
                                        <span>{{ props.row.ctime | formatYMDhms  }}</span>
                                    </el-form-item>
                                    <el-form-item label="商品销量">
                                        <span>{{ props.row.sellCount }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="name">
                        </el-table-column>
                        <el-table-column label="所属分类" prop="category">
                        </el-table-column>
                        <el-table-column label="商品价格" prop="price">
                        </el-table-column>
                        <el-table-column label="商品图片" prop="imgUrl">
                            <template slot-scope="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.imgUrl" :preview-src-list="[scope.row.imgUrl]">
                            </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品描述" prop="goodsDesc">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <div class="block">

                        <el-pagination class="mt20" background @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" @current-page="currentPageEvent" :page-sizes="[3, 5]"
                            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="total"></el-pagination>
                    </div>

                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getProductlist } from '@/api/user'
// import { create } from 'domain'
export default {
    data() {
        return {
            tableData: [],
            ids: [],
            currentPage: 1,
            pageSize: 3,
            total: 0,
            url: 'imgUrl',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    },
    methods: {
        async getData() {
            let currentPage = this.currentPage
            let pageSize = this.pageSize
            let res = await getProductlist({
                currentPage,
                pageSize,
            })
            let { data, total } = res.data
            this.total = total
            this.tableData = data
        },
        handleSizeChange() { },
        currentPageEvent() { },
        handleCurrentChange() { }
    },
    created() {
        this.getData()
    }

}

</script>

<style lang="scss" scoped>
.app {
    background: #fff;
    margin: 20px 0px 0px 20px;

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .img {
        width: 50px;
    }

    .clearfix:after {
        clear: both
    }

    .order_box {
        padding: 20px 0px 0px 20px;

        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

        .block {
            margin-top: 20px;
        }
    }

}
</style>